import React, { PureComponent } from 'react'

import { connect } from 'react-redux'
import { subAction } from '../store/counter/actionCreators'

class Profile extends PureComponent {
  render() {
    return (
      <div>
        <hr />
        <h1>Profile</h1>
        <div>
          <h2>当前计数:{this.props.counter}</h2>
          <button onClick={(e) => this.props.decrement()}>-1</button>
          <button onClick={(e) => this.props.subCounter()}>-5</button>
        </div>
        <h1>Banners</h1>
        <ul>
          {this.props.banners.map((item, index) => {
            return <li key={item.acm}>{item.title}</li>
          })}
        </ul>
        <h1>Recommend</h1>
        <ul>
          {this.props.recommends.map((item, index) => {
            return <li key={item.acm}>{item.title}</li>
          })}
        </ul>
      </div>
    )
  }
}
const mapStateToProps = (state) => ({
  counter: state.counterInfo.counter,
  banners: state.homeInfo.banners,
  recommends: state.homeInfo.recommends
})

const mapDispatchToProps = (dispatch) => ({
  decrement() {
    dispatch(subAction(1))
  },
  subCounter() {
    dispatch(subAction(5))
  }
})
export default connect(mapStateToProps, mapDispatchToProps)(Profile)
